<template>
	<div class="app-container">
		<div v-if="user">
			<el-row :gutter="20">

				<el-col :span="6" :xs="24">
					<user-card :user="user"></user-card>
				</el-col>

				<el-col :span="18" :xs="24">
					<el-card>
						<el-tabs v-model="activeTab">
							<el-tab-pane label="Activity" name="activity">
								<activity></activity>
							</el-tab-pane>
							<el-tab-pane label="Timeline" name="timeline">
								<timeline></timeline>
							</el-tab-pane>
							<el-tab-pane label="Account" name="account">
								<account :user="user"></account>
							</el-tab-pane>
						</el-tabs>
					</el-card>
				</el-col>

			</el-row>
		</div>
	</div>
</template>

<script>
	const l = httpVueLoader;
	const UserCard = l('/vue/views/profile/components/UserCard.vue');
	const Activity = l('/vue/views/profile/components/Activity.vue');
	const Timeline = l('/vue/views/profile/components/Timeline.vue');
	const Account = l('/vue/views/profile/components/Account.vue');
	import { mapGetters } from '/vue/libs/vuex.esm.browser.min.js'

	module.exports = {
		name: 'Profile',
		components: { "UserCard": UserCard, "Activity": Activity, "Timeline": Timeline, "Account": Account },
		data() {
			return {
				user: {},
				activeTab: 'activity'
			}
		},
		computed: {
			...mapGetters([
				'name',
				'avatar',
				'roles'
			])
		},
		created() {
			this.getUser();
		},
		methods: {
			getUser() {
				this.user = {
					name: this.name,
					role: this.roles.join(' | '),
					email: 'admin@test.com',
					avatar: this.avatar
				}
			}
		}
	}
</script>
